import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { placeholderImageDefaultProps } from './defaultProps';
import type { PlaceholderImageOptions } from './type';

export interface PlaceholderImageProps extends PlaceholderImageOptions, HTMLAttributes<HTMLDivElement> {}

const PlaceholderImage: FC<PlaceholderImageProps> = (props) => {
  const { className, ratio, children, forwardedRef, ...placeholderImageProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('image', ratio, className), ...placeholderImageProps },
    children,
  );
};

PlaceholderImage.displayName = 'PlaceholderImage';
PlaceholderImage.defaultProps = placeholderImageDefaultProps;

export default PlaceholderImage;
